<template>
  <div class="back bg-cover w-full h-full">
    <div class="opacity-80 bg-white a w-[400px] h-80 shadow-lg rounded-lg absolute right-32 top-1/2 mt-[-160px]">
      <h3 class="text-center text-[40px] text-rose-500 font-bold pt-5">Login</h3>
      <div>
        <input class="w-60 h-9 mt-7 ml-20 pl-2 rounded border-2 border-solid border-zinc-600 " type="text" id="userName"
          placeholder="请输入用户名">
      </div>
      <div>
        <input class="w-60 h-9 mt-7 ml-20 pl-2 rounded border-2 border-solid border-zinc-600" type="password"
          id="password" placeholder="请输入密码">
      </div>
      <div class="mt-10 text-base flex flex-nowrap justify-evenly items-center">
        <button class="hover:underline hover:text-rose-500" @click="this.$router.push({ path: '/' })">返回首页</button>
        <button class="border-2 border-solid border-rose-500 hover:bg-rose-500 hover:text-white rounded-lg py-1.5 px-5"
          @click="login">登录</button>
        <button class="border-2 border-solid border-rose-500  hover:bg-rose-500 hover:text-white rounded-lg py-1.5 px-5"
          @click="this.$router.push({ path: '/register' })">注册</button>
        <button class="hover:underline hover:text-rose-500" @click="this.$router.push({ path: '/forget' })">忘记密码</button>
      </div>
    </div>
  </div>
</template>


<script>
import axios from 'axios'
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.checkLogin()
  },
  methods: {
    checkLogin() {
      if ( window.localStorage.getItem( "userToken" ) != null ) {
        this.$router.push( { path: '/' } )
      } else {
        let pas = window.sessionStorage.getItem( 'pas' )
        if ( pas != null ) {
          this.$message.success( pas );
        }
        sessionStorage.removeItem( 'pas' );
        let msg = window.sessionStorage.getItem( 'msg' )
        if ( msg != null ) {
          this.$message.error( msg );
        }
        sessionStorage.removeItem( 'msg' );
      }
    },
    login() {
      var userName = document.getElementById( 'userName' ).value
      axios( {
        url: 'http://127.0.0.1:8081/api/login',
        method: 'post',
        params: {
          userName: userName,
          password: document.getElementById( 'password' ).value,
        }
      } ).then( res => {
        console.log( res.data );
        if ( res.data.code === 20000 ) {
          window.localStorage.setItem( 'userToken', res.data.data.token )
          window.localStorage.setItem( 'userName', userName )
          this.$router.push( { path: '/' } )
        } else {
          this.$message.error( res.data.message )
        }
      } )
    },
  },
}
</script>
<style scoped >
.back {
  background: url(../../../assets/img/login.png);
}
</style>